/**
 * @name UserSignUp
 * @desc 用户注册页面
 * @author darcrand
 * @version 2018-10-15
 */

import React, { Component } from 'react'
import StepBotton from '@/components/StepBotton'
import AvatarItem from '@/components/AvatarItem'
import './styles.scss'

const avatarMarvel = Array(9)
    .fill(undefined)
    .map((v, i) => {
        const src = require('@/assets/avatars/a-0-' + i + '.jpg')
        return { id: 'a-0-' + i, src }
    })

const keyCodeEnter = 13

class UserSignUp extends Component {
    static defaultProps = {
        onSignUp: (name, avatar) => {}
    }

    state = {
        userName: '',
        userAvatar: '',
        step: 1
    }

    componentDidMount() {
        this.refs.input.focus()
    }

    onNameChange = e => this.setState({ userName: e.target.value })

    onHitEnter = e => {
        if (e.keyCode === keyCodeEnter && this.state.userName.trim()) {
            e.target.blur()
            this.setState({ step: 2 })
        }
    }

    onAvatarClick = id => {
        console.log('avatar', id)
        this.setState({ userAvatar: id })
    }

    onSetStep = type => {
        this.setState(pre => ({ step: type === 'prev' ? pre.step - 1 : pre.step + 1 }))
    }

    onSubmit = () => this.props.onSignUp(this.state.userName, this.state.userAvatar)

    render() {
        const { userName, userAvatar, step } = this.state

        return (
            <div classes="container">
                <div classes="wave-background" />
                <div classes={step === 1 ? 'slide-item-active' : 'slide-item-normal'}>
                    <h1 classes="title">welcome to the chat room.</h1>
                    <p classes="text">now, what's your nickname?</p>
                    <input
                        ref="input"
                        type="text"
                        classes="name-input"
                        value={userName}
                        maxLength={10}
                        onChange={this.onNameChange}
                        onKeyUp={this.onHitEnter}
                    />
                    <div classes="step-ctrl">
                        <StepBotton text="next" disabled={!userName} handleClick={() => this.onSetStep('next')} />
                    </div>
                </div>

                <div classes={step === 2 ? 'slide-item-active' : 'slide-item-normal'}>
                    <p classes="text">choose the avatar that you like.</p>

                    <div classes="avatars">
                        <p classes="avatar-title">Marvel</p>
                        <div classes="avatar-list">
                            {avatarMarvel.map((v, i) => (
                                <AvatarItem
                                    key={i}
                                    data={v}
                                    currAvatar={userAvatar}
                                    handleClick={() => this.onAvatarClick(v.id)}
                                />
                            ))}
                        </div>
                    </div>

                    <div classes="step-ctrl">
                        <StepBotton text="back" handleClick={() => this.onSetStep('prev')} />
                        <StepBotton text="next" disabled={!userAvatar} handleClick={() => this.onSetStep('next')} />
                    </div>
                </div>

                <div classes={step === 3 ? 'slide-item-active' : 'slide-item-normal'}>
                    <div
                        classes="user-avatar"
                        style={
                            userAvatar
                                ? { backgroundImage: `url("${require('@/assets/avatars/' + userAvatar + '.jpg')}")` }
                                : null
                        }
                    />
                    <p classes="user-name">{userName}</p>

                    <div classes="step-ctrl">
                        <StepBotton text="back" handleClick={() => this.onSetStep('prev')} />
                        <StepBotton text="chat now" handleClick={this.onSubmit} />
                    </div>
                </div>
            </div>
        )
    }
}

export default UserSignUp
